<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
    <style>
        header{ background:#f2f2f2; }
        header ul li { height: 50px; line-height: 50px; text-align: center; display: none; color: #323237; position: relative;font-size: 18px;  }
        header ul li.active{ display: block; }
        #footer{  background-color: #f2f2f2; }
        #footer ul li{  padding-top: 36px; padding-bottom: 4px; background: url() no-repeat center 2px; background-size: auto 30px; text-align: center; }
        #footer ul li.active{ color: #1B98FF; }
        #footer ul li:nth-child(1){ background-image: url(../image/bottombtn0101.png); }
        #footer ul li:nth-child(2){ background-image: url(../image/bottombtn0201.png); }
        #footer ul li:nth-child(3){ background-image: url(../image/bottombtn0301.png); }
        #footer ul li:nth-child(4){ background-image: url(../image/bottombtn0401.png); }
        #footer ul li:nth-child(1).active{ background-image: url(../image/bottombtn01022.png); }
        #footer ul li:nth-child(2).active{ background-image: url(../image/bottombtn0202.png); }
        #footer ul li:nth-child(3).active{ background-image: url(../image/bottombtn0302.png); }
        .flex-con{
          overflow: auto
        }
        .swiper-container{
        width: 95%;
        border-radius: 10px;
        overflow: hidden;
        margin: 0 auto;
      }
      .swiper-slide{
        height: 200px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
      }
    </style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical">
    <header>
        <ul>
            <li class="border-b active" >首页</li>
        </ul>
    </header>
    
    <div id="main" class="flex-con">
              <!-- 轮播图 -->
        <!-- <div id="app">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                     <div class="swiper-slide" v-for="(bannerItem, index) in bannerList">
                        <img :src="bannerItem">
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div> -->

    </div>
    <div id="footer" class="border-t">
        <ul class="flex-wrap" >
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con active" >首页</li>
        </ul>
    </div>
</div>
</body>
</html>
<script src="../script/vue.js" charset="utf-8"></script>
<script src="../script/swiper.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    apiready = function () {
        $api.fixStatusBar( $api.dom('header') );
        api.setStatusBarStyle({
            style: 'dark',
            color: '#f2f2f2'
        });
    //     var vm = new Vue({
    //     el: '#app',
    //     data: {
    //       bannerList: [
    //         '../image/banner_0.jpg',
    //         '../image/banner_1.jpg',
    //         '../image/banner_2.jpg',
    //         '../image/banner_3.jpg'
    //       ]
    //     }
    //   })

    //   var mySwiper = new Swiper('.swiper-container', {
    //     autoplay: 5000, //可选选项，自动滑动
    //     loop: true,
    //     el: 'swiper-pagination'
    //   })
        funIniGroup();
    }

    function funIniGroup(){
        var eHeaderLis = $api.domAll('header li'),
            frames = [];
            console.log(eHeaderLis);
        for (var i = 0,len = eHeaderLis.length; i < len; i++) {
                frames.push( {
                    name: 'frame'+i,
                    url: './frame'+i+'.html',
                    bgColor : 'rgba(0,0,0,.2)',
                    bounces: false,
                    pageParam: {userName:api.pageParam["userName"]}
                } )
        }
        api.openFrameGroup({
            name: 'group',
            scrollEnabled: false,
            rect: {
                x: 0,
                y: $api.dom('header').offsetHeight,
                w: api.winWidth,
                h: $api.dom('#main').offsetHeight
            },
            index: 0,
            frames: frames
        }, function (ret, err) {

        });
    }

    // 随意切换按钮
    function randomSwitchBtn( tag ) {
        if( tag == $api.dom('#footer li.active') )return;
        var eFootLis = $api.domAll('#footer li'),
            eHeaderLis = $api.domAll('header li'),
            index = 0;
        for (var i = 0,len = eFootLis.length; i < len; i++) {
            if( tag == eFootLis[i] ){
                index = i;
            }else{
                $api.removeCls(eFootLis[i], 'active');
                $api.removeCls(eHeaderLis[i], 'active');
            }
        }
        $api.addCls( eFootLis[index], 'active');
        $api.addCls( eHeaderLis[index], 'active');
        api.setFrameGroupIndex({
            name: 'group',
            index: index
        });
    }
</script>
